<script setup lang="ts">
  import { GameProductGroup } from '@/types/game';
  import { onMounted, ref, watch } from 'vue';
  import { Modal } from '@arco-design/web-vue';

  const props = defineProps<{
    modelValue?: GameProductGroup[];
    isChildGame?: boolean;
  }>();

  const emit = defineEmits(['update:modelValue']);

  const localValue = ref<GameProductGroup[]>([]);
  onMounted(() => {
    localValue.value = props.modelValue || [];
  });

  watch(
    [localValue],
    () => {
      emit('update:modelValue', localValue.value);
    },
    {
      deep: true,
    }
  );

  const handleAddGroup = () => {
    localValue.value.push({
      name: '',
      description: '',
      minProductChoose: 1,
      maxProductChoose: 1,
      products: [
        {
          name: '',
          description: '',
          mustPay: true,
          disabled: false,
        },
      ],
    });
  };

  const handleDeleteGroup = (index: number) => {
    const group = localValue.value[index];
    if (group.id) {
      Modal.info({
        title: '提示',
        content:
          '该费用类型已被使用，无法删除。如果不再使用，可以将其所有的费用项目『禁用』。',
      });
    } else {
      localValue.value.splice(index, 1);
    }
  };

  const handleAddProduct = (group: GameProductGroup) => {
    if (group.products.length === 0) {
      group.products.push({
        name: '',
        description: '',
        mustPay: true,
        disabled: false,
      });
    } else {
      group.products.push({
        name: '',
        description: '',
        mustPay: false,
        disabled: false,
      });
    }
  };

  const handleDeleteProduct = (
    group: GameProductGroup,
    productIndex: number
  ) => {
    const product = group.products[productIndex];
    if (product.id) {
      Modal.info({
        title: '提示',
        content:
          '该费用项目已被使用，无法删除。如果不再使用该项目，可以将其『禁用』',
      });
    } else {
      group.products.splice(productIndex, 1);
    }
  };
</script>

<template>
  <div class="product-editor">
    <div
      v-for="(group, groupIndex) in localValue"
      :key="groupIndex"
      class="product-editor-item"
    >
      <a class="product-editor-close" @click="handleDeleteGroup(groupIndex)">
        <icon-close />
      </a>
      <a-form-item
        label="费用类型"
        :field="`gameProductGroupVOS[${groupIndex}].name`"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input
          v-model="group.name"
          placeholder="请输入费用类型名称"
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item
        label="类型说明"
        :field="`gameProductGroupVOS[${groupIndex}].description`"
      >
        <a-input
          v-model="group.description"
          placeholder="请输入费用类型说明"
          style="width: 400px"
        />
      </a-form-item>

      <a-row :gutter="12">
        <a-col :span="8">
          <a-form-item
            label="非必须支付费用项目至少需选几项"
            :field="`gameProductGroupVOS[${groupIndex}].minProductChoose`"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <a-input-number
              v-model="group.minProductChoose"
              :precision="0"
              :min="0"
              :step="1"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="非必须支付费用项目最多需选几项"
            :field="`gameProductGroupVOS[${groupIndex}].maxProductChoose`"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <a-input-number
              v-model="group.maxProductChoose"
              :precision="0"
              :min="0"
              :step="1"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <div style="color: var(--color-text-2)"> 费用项目 </div>

      <div>
        <div class="product-list">
          <div class="product-list-row">
            <div class="product-item-name">
              <strong class="arco-form-item-label-required-symbol"
                ><svg
                  fill="currentColor"
                  viewBox="0 0 1024 1024"
                  width="1em"
                  height="1em"
                >
                  <path
                    d="M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z"
                  ></path></svg
              ></strong>
              项目名称
            </div>
            <div class="product-item-price">
              <strong class="arco-form-item-label-required-symbol"
                ><svg
                  fill="currentColor"
                  viewBox="0 0 1024 1024"
                  width="1em"
                  height="1em"
                >
                  <path
                    d="M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z"
                  ></path></svg
              ></strong>
              价格
            </div>
            <div class="product-item-desc">说明</div>
            <div class="product-item-pay">必须支付</div>
            <div class="product-item-disabled">禁用</div>
            <div class="product-item-disabled">删除</div>
          </div>
          <div
            v-for="(product, productIndex) in group.products"
            :key="productIndex"
            class="product-list-row"
          >
            <div class="product-item-name">
              <a-form-item
                hide-label
                :field="`gameProductGroupVOS[${groupIndex}].products[${productIndex}].name`"
                :rules="[{ required: true, message: '不能为空' }]"
              >
                <a-input v-model="product.name" />
              </a-form-item>
            </div>
            <div class="product-item-price">
              <a-form-item
                hide-label
                :field="`gameProductGroupVOS[${groupIndex}].products[${productIndex}].rmbPrice`"
                :rules="[{ required: true, message: '不能为空' }]"
              >
                <a-input-number
                  v-model="product.rmbPrice"
                  :precision="2"
                  :min="isChildGame ? 0 : 0.01"
                  :disabled="!!product.id"
                />
              </a-form-item>
            </div>
            <div class="product-item-desc">
              <a-form-item hide-label>
                <a-input v-model="product.description" />
              </a-form-item>
            </div>
            <div class="product-item-pay">
              <a-form-item hide-label>
                <a-switch v-model="product.mustPay" />
              </a-form-item>
            </div>
            <div class="product-item-disabled">
              <a-form-item hide-label>
                <a-switch v-model="product.disabled" />
              </a-form-item>
            </div>
            <div class="product-item-disabled">
              <a-button
                style="margin-bottom: 20px"
                size="small"
                @click="handleDeleteProduct(group, productIndex)"
              >
                <template #icon><icon-close /></template>
              </a-button>
            </div>
          </div>
        </div>

        <a-button @click="handleAddProduct(group)">
          <template #icon><icon-plus /></template>
          添加费用项目
        </a-button>
      </div>
    </div>

    <a-button @click="handleAddGroup">
      <template #icon><icon-plus /></template>
      添加费用类型
    </a-button>
  </div>
</template>

<style lang="less" scoped>
  .product-editor {
    margin-bottom: 20px;
    &-item {
      padding: 12px;
      border: 1px solid var(--color-border-2);
      border-radius: 3px;
      margin-bottom: 12px;
      position: relative;
    }

    &-close {
      position: absolute;
      right: 12px;
      top: 10px;
      cursor: pointer;
      color: rgb(var(--red-6));
    }

    &-adder {
      margin-top: 12px;
      border-radius: 3px;
      cursor: pointer;
      line-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed var(--color-border-3);
      color: var(--color-text-2);
      :deep(.arco-icon) {
        margin-right: 5px;
      }
      &:hover {
        color: rgb(var(--primary-6));
        border-color: rgb(var(--primary-6));
      }
    }
  }

  .product-list {
    margin-top: 6px;
  }

  .product-list-row {
    display: flex;
    align-items: center;
  }

  .product-item {
    &-name {
      width: 180px;
      margin-right: 10px;
    }
    &-price {
      width: 120px;
      margin-right: 10px;
    }
    &-desc {
      flex: 1;
      min-width: 0;
      margin-right: 10px;
    }
    &-pay {
      width: 90px;
    }
    &-disabled {
      width: 70px;
    }
  }
</style>
